<template>
  <a-layout class="layout">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img
          v-if="!collapsed"
          :src="logoBig"
          alt="logo"
          style="height: 50px; display: block; margin: 0 auto"
        />
        <img
          v-else=""
          :src="logo"
          alt="logo"
          style="height: 50px; display: block; margin: 0 auto"
        />
      </div>
      <!-- 侧边菜单 -->
      <myMenu />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="top-header" style="padding: 0">
        <div class="collapse-icon">
          <!-- 左侧折叠按钮 -->
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        </div>
        <div class="header-right">
          <!-- 个人用户下拉 -->
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent
              ><UserOutlined /> <span>你好，xxx{{ useUSerStore.token }}</span></a
            >
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;">个人中心</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="logaut">退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <a-layout-content
        :style="{
          background: '#f0f2f5',
          overflow: 'auto',
          margin: '24px 16px',
          padding: '24px',
          minHeight: '280px'
        }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup name="login">
import myMenu from './components/menu/index.vue'
import { createVNode, ref } from 'vue'
import { useUSerStore } from '@/store/user'
import logoBig from '@/assets/img/logo1.png'
import logo from '@/assets/img/logo.png'
// import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
const selectedKeys = ref<string[]>(['1'])
const collapsed = ref<boolean>(false)

// 退出登录
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
/* import { createVNode } from 'vue' */
import { Modal, message } from 'ant-design-vue'
// 跳转到登录界面
// import { useRouter } from 'vue-router'
const router = useRouter()
const logaut = () => {
  Modal.confirm({
    title: '温习提示！',
    icon: createVNode(ExclamationCircleOutlined),
    cancelText: '取消',
    okText: '确定',
    content: createVNode('div', { style: 'color:red;' }, '你确定要退出登录吗？'),
    onOk() {
      console.log('OK')
      // 发送请求
      // 提示退出成功
      message.success('退出成功')
      // 去的登陆页面
      router.push({ name: 'layout' })
    },
    onCancel() {
      console.log('Cancel')
    },
    class: 'test'
  })
}
</script>
<style scoped>
.layout {
  height: 100%;
}
.collapse-icon {
  font-size: 20px;
  margin-left: 20px;
}
.top-header {
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.ant-dropdown-link {
  display: inline-block;
  line-height: 30px;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
.logo {
}
</style>
